<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.gauge.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A customised and adjustable Gauge chart</title>
    
    <meta name="description" content="A customised Gauge chart which can be adjusted" />
     
</head>
<body>

    <h1>A customised and adjustable Gauge chart</h1>

    <canvas id="cvs" width="250" height="250" style="background-color: black; border-radius: 125px; box-shadow: 0 0 25px gray; border: 5px solid #ddd">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            var gauge = new RGraph.Gauge({
                id: 'cvs',
                min: 0,
                max: 10,
                value: 7,
                options: {
                    angles: {
                        start: RGraph.PI - (RGraph.PI / 8),
                        end: RGraph.TWOPI + (RGraph.PI / 8)
                    },
                    shadow: false,
                    text: {
                        color: 'white'
                    },
                    tickmarks: {
                        big: {
                            color: 'white'
                        },
                        medium: {
                            color: 'white'
                        },
                        small: {
                            color: 'white'
                        }
                    },
                    colors: {
                        ranges: []
                    },
                    background: {
                        color: 'black'
                    },
                    border: {
                        inner: 'black',
                        outer: 'black',
                        outline: 'black'
                    },
                    needle: {
                        colors: ['red'],
                        type: 'line',
                        tail: true
                    },
                    centerpin: {
                        radius: 0.1
                    },
                    title: {
                        top: {
                            self: 'Speed',
                            color: 'white'
                        }
                    },
                    labels: {
                        centered: true,
                        offset: 7
                    }
                }
            }).draw()

    
            /**
            * This draws a simple gray circle over the centerpin
            */
            function myCenterpin (obj)
            {
                // This circle becomes the border of the centerpin
                obj.context.beginPath();
                    obj.context.fillStyle = '#aaa';
                    obj.context.arc(obj.centerx, obj.centery, 10, 0, RGraph.TWOPI, false);
                obj.context.fill();
            }
            RGraph.AddCustomEventListener(gauge, 'ondraw', myCenterpin);
            
            gauge.draw();
        
            /**
            * This event listener facilitates you being able to click and adjust the gauge
            */
            gauge.canvas.onclick = function (e)
            {
                var obj   = e.target.__object__;
                var value = obj.getValue(e);
                
                obj.value = value;
                
                obj.grow();
            }
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>